html,body,div {
    margin: 0;
    padding: 0;
}
html,body,.swiper-container,.swiper-wrapper {
    width: 100%;
    height: 100%;
}

button,button:hover {border: 0;outline: none;}
/*上下左右居中*/
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/*上下居中*/
.ct {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
/*左右居中*/
.cl {
    position: absolute;
    left: 50%; margin-left: -33.15rem;
/*    transform: translateX(-50%);
    transform: translateX(-50%);*/
}

.rel {position: relative;}

.abs {position: absolute;}

.swiper-slide,.slide-loading,.slide1 {
    width: 100%;
    height: 100%;
    background-size: 100%;
    overflow: hidden;
}

/*第一屏*/
.slide-loading,.slide1,.slide2 {
    position: relative;
    background: #495973 url("../images/bg.jpg") no-repeat center center;
    background-size: 100% 100%;
}
.slide-loading{ position: absolute; top: 0; left: 0; z-index: 999; }
.bg-star {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    -webkit-animation: starBling 4s infinite;
    -moz-animation: starBling 4s infinite;
    -ms-animation: starBling 4s infinite;
    animation: starBling 4s infinite;
}

@keyframes starBling {
    0% {opacity: 0.2}
    25% {opacity: .6}
    50% {opacity: 1}
    75% {opacity: .6}
    100% {opacity: .2}
}

.ball-lt {
    position: absolute;
    width: 9.7rem;
    height: 9.7rem;
    left: 7.5rem;
    top: 34.8rem;
    -webkit-animation: moveSlow 8s infinite;
    -moz-animation: moveSlow 6s infinite;
    -ms-animation: moveSlow 6s infinite;
    animation: moveSlow 8s infinite;
}

.ball-rt {
    position: absolute;
    width: 26.9rem;
    height: 18.4rem;
    right: 7.8rem;
    top: 7.8rem;
    -webkit-animation: moveSlow 6s infinite;
    -moz-animation: moveSlow 6s infinite;
    -ms-animation: moveSlow 6s infinite;
    animation: moveSlow 6s infinite;
}

.bt-earth {
    width: 100%;
    height: 60.4rem;
    display: block; margin-top: -19rem;
}

.earth,.bt-earth img,.video-end {
    width: 100%;
    height: 100%;
}

.bt-earth img {
    display: inherit;
    width: 66.3rem;
    height: 66.3rem;
    margin: 0 auto;
    -webkit-transform: scale(1.5) translateY(25%);
    -moz-transform: scale(1.5) translateY(25%);
    -ms-transform: scale(1.5) translateY(25%);
    transform: scale(1.5) translateY(25%);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: a 10s linear 0s infinite;
    -moz-animation: a 10s linear 0s infinite;
    -ms-animation: a 10s linear 0s infinite;
    animation: a 5s linear 0s infinite;
}

@keyframes a {
    from {
        -webkit-transform: scale(1.5) translateX(0) translateY(25%) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -moz-transform: scale(1.5) translateX(0) translateY(25%) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -ms-transform: scale(1.5) translateX(0) translateY(25%) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: scale(1.5) translateX(0) translateY(25%) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    to {
        -webkit-transform: scale(1.5) translateX(0) translateY(25%) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg);
        -moz-transform: scale(1.5) translateX(0) translateY(25%) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg);
        -ms-transform: scale(1.5) translateX(0) translateY(25%) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg);
        transform: scale(1.5) translateX(0) translateY(25%) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg);
    }
}

.loading-text {
    position: absolute;
    font-size: 7.45rem;
    color: #1d5788;
    bottom: 3rem;
    right: 0;
    z-index: 4;
}

.title {
    position: absolute;
    width: 6.2rem;
    height: 30.3rem;
    left: 34%;
    bottom: 67rem;
}
.new-tit{
    position: absolute; width: 6.2rem; height: 30.3rem; top: 11rem; left: 23rem; z-index: 3;
}
.run {
    display: block;
    height: 36.7rem;
    margin: 0 auto;
    background: url("../images/run.png")no-repeat 1377px 100%;
    -webkit-animation: run 1s step-end 0s infinite both;
    -moz-animation: run 1s step-end 0s infinite both;
    -ms-animation: run 1s step-end 0s infinite both;
    animation: run 1s step-end 0s infinite both;
    z-index: 3; position: relative;
}

.earth-all-p .run {}

.slide1 video {
    position: absolute;
    width: 100%;
    bottom: 0;
}

@keyframes run {
    0%{
        width: 210px;
        background-position:0 0;
    }
    16%{
        width: 309px;
        background-position: -210px 0;
    }
    32%{
        width: 230px;
        background-position: -519px -20px;
    }
    49%{
        width: 154px;
        background-position: -749px 0;
    }
    65%{
        width: 275px;
        background-position: -903px 0;
    }
    81%{
        width: 199px;
        background-position: -1178px -20px;
    }
    100%{
        width: 199px;
        background-position:-1377px 0;
    }
}
.slide1 .bt-earth {height: 51.3rem;}
.slide1 .title {bottom: 58.2rem;left: 16.5rem;}

.btn-go-hc {
    position: absolute;
    width: 28.9rem;
    height: 10.3rem;
    bottom: 3rem;
    left: 50%; margin-left: -14.45rem;
    background: url("../images/go_hc.png") no-repeat center center;
    background-size: 100% 100%;
    z-index: 3;
}

.center-part {
    width: 100%;
    height: 91rem;
    z-index: 3;
}

.earth-all-p {
    width: 100%;
    height: 100%;
}

.earth-all-p .jd-earth {
    width: 66.3rem;
    height: 66.2rem;
    bottom: 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: b 5s linear 0s infinite;
    animation: b 5s linear 0s infinite;
}
@keyframes b {
    from {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    to {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg);
        transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg);
    }
}

.jd-title {
    width: 64.3rem;
    height: 27rem;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 46.6rem;
    z-index: 2;
}

.jd-wish {
    width: 55.2rem;
    height: 10.3rem;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 60rem;
    z-index: 2;
}

.cloud1 {
    width: 18.8rem;
    height: 4.7rem;
    left: 0;
    top: 56rem;
    z-index: 3;
    -webkit-animation: moveSlow 4s infinite;
    -moz-animation: moveSlow 4s infinite;
    -ms-animation: moveSlow 4s infinite;
    animation: moveSlow 4s infinite;
}

.cloud2 {
    width: 37.7rem;
    height: 10.6rem;
    right: 0;
    bottom: 12.2rem;
    z-index: 3;
    -webkit-animation: moveSlow 4s infinite;
    -moz-animation: moveSlow 4s infinite;
    -ms-animation: moveSlow 4s infinite;
    animation: moveSlow 4s infinite;
}

@keyframes moveSlow {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(2rem);
        -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
        transform: translateY(2rem);
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes moveSlow{
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(2rem);
        transform: translateY(2rem);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}


/**Second**/
.slide2-bg-earth {
    position: absolute;
    width: 56.8rem;
    height: 46.5rem;
    left: 0;
    bottom: 0;
    z-index: 3;
}
.slide2-ball,.slide2-ball2 {
    -webkit-animation: moveSlow 6s infinite;
    -moz-animation: moveSlow 6s infinite;
    -ms-animation: moveSlow 6s infinite;
    animation: moveSlow 6s infinite;
}
.slide2-ball {
    position: absolute;
    width: 9.7rem;
    height: 9.7rem;
    left: -3rem;
    top: 29rem; z-index: 2;
}
.slide2-ball2 {
    position: absolute;
    width: 30rem;
    height: 21.5rem;
    right: -8rem;
    top: 7rem; z-index: 2;
}
.upload-pic {
    position: absolute;
    width: 66.4rem;
    height: 66.7rem;
    background: url("../images/bg_takepic.png") no-repeat center center;
    background-size: 100% 100%;
    top: 30.6rem;
    left: 6rem;
    text-align: center;
    z-index: 3;
}
@keyframes moveScale {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
.upload-pic>h4 {
    margin-top: 18.3rem;
    margin-bottom: 2.4rem;
    font-size: 4.8rem;
    color: #c07045;
}
.upload-pic>img {
    width: 15.1rem;
    height: 11.4rem;
    margin-bottom: 4rem;
}
.upload-btn {
    width: 35.8rem;
    height: 9.8rem;
    line-height: 9rem;
    background: url("../images/bg_btn.png") no-repeat center center;
    background-size: 100% 100%;
    border: 0;
    outline: none;
    font-size: 5rem;
    color: #843915;
    animation: moveScale .8s infinite;
}
/*Third*/
.slide3 {
    position: relative;
    background: #fdeed1 url("../images/bg3.jpg") no-repeat center center;
    background-size: 100% 100%;
}
.per-cpzj {
    position: absolute;
    width: 30.9rem;
    height: 63.2rem;
    background: url("../images/fszj.png") no-repeat center center;
    background-size: 100% 100%;
    z-index: 2;
    left: .4rem;
    top: 30rem;
}
.per-dl,.dl-inner {
    position: absolute;
    width: 31.8rem;
    height: 62.6rem;
    background: url("../images/dl/1.png") no-repeat center top;
    background-size: 100% 57.7rem;
    z-index: 2;
    right: .4rem;
    top: 30rem;
}
.per-dl img{ position: absolute; bottom: 0; left: 0; z-index: 2; width: 31.8rem; height: 4.2rem; }
.per-user {
    position: absolute;
    width: 38rem;
    height: 67.9rem;
    margin: 0 auto;
    background: url("../images/bg_fs1s.png") no-repeat center center;
    background-size: 100% 100%;
    left: 0;
    right: 0;
    top: 29rem;
    z-index: 3;
}
.user-pic {
    position: absolute;
    width: 14.2rem;
    height: 12.4rem;
    top: 42.5rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
}
.title-lt,.title-rt {
    position: absolute;
    width: 15.2rem;
    height: 35.5rem;
    padding: 2.7rem 3rem;
    background: url(../images/bg_fs_title.png) no-repeat center center;
    background-size: 100% 100%;
    box-sizing: border-box;
    text-align: center;
    top: 64rem;
    z-index: 4;
}

.title-lt {left: .4rem;}
.title-lt .name,.title-rt .name {
    margin-left: .9rem;
}
.title-lt p,.title-rt>p {
    display: inline-block;
    width: 2.4rem;
    height: 30.1rem;
    font-size: 2.3rem;
    color: #b76848;
    font-weight: bold;
    word-break: break-all;
    /*writing-mode: tb-rl;*/
    margin: 0;
    text-align: -webkit-center;
    vertical-align: top;
    letter-spacing: 2px;
}
.title-lt p {writing-mode: tb-rl;}
.title-rt>p.name {width: 2.6rem;}

.title-rt {right: .4rem;}
.upt-btn-row{ position: absolute; height: 34rem; bottom: 0; left: 0; width: 100%;}
.btn-ch-xnfx {
    position: absolute;
    width: 19.5rem;
    height: 6.9rem;
    background: url("../images/btn_xzxnfx.png") no-repeat center center;
    background-size: 100% 100%;
    top: 2.8rem;
    left: .4rem;
}
.btn-scmz {
    position: absolute;
    width: 27.1rem;
    height: 9.6rem;
    margin: 0 auto;
    background: url("../images/bt_scmz.png") no-repeat center center;
    background-size: 100% 100%;
    top: 0;
    left: 0;
    right: 0; font-size: 0; text-indent: -999px; overflow: hidden;
}
.btn-ch-dl {
    position: absolute;
    width: 19.7rem;
    height: 6.9rem;
    background: url("../images/bt_xzdl.png") no-repeat center center;
    background-size: 100% 100%;
    top: 2.8rem;
    right: .4rem;
}
/*.btn-ch-dl.active {
    background: url("../images/bt_xzdl_active.png") no-repeat center center;
    background-size: 100% 100%;
}*/
.btn-merge {
    position: absolute;
    width: 32.9rem;
    height: 8.3rem;
    margin: 0 auto;
    background: url("../images/btn_hc_t.png") no-repeat center center;
    background-size: 100% 100%;
    bottom: 10rem;
    left: 0;
    right: 0;
}
.btn-merge.active {
    background: url("../images/btn_hc.png") no-repeat center center;
    background-size: 100% 100%;
}
.select-dl {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5; top: 0; left: 0;
    display: none;
}
.select-dl-box {
    width: 100%;
    height: 100%;
}
.select-dl-inner {
    position: absolute;
    width: 74.8rem;
    height: 102.6rem;
    box-sizing: border-box;
    padding: 8.3rem 6.4rem 8.7rem 6.7rem;
    background: url(../images/bg_sel_dl.png) no-repeat center center;
    background-size: 100% 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.select-dl-inner a {
    display: inline-block;
    min-width: 14.5rem;
    margin-bottom: .7rem;
    margin-right: .2rem;
    height: 5rem; line-height: 5rem;
    text-decoration: none;
    background-color: #ffd271;
    box-shadow: 0.2rem 0.2rem 0.7rem rgba(209,155,128,.75);
    border: .2rem solid #c67217;
    color: #c67217;
    font-size: 3rem;
    text-align: center; overflow: hidden;
}
.select-dl-inner a.dl-md {
    width: 30rem;
}
.select-dl-inner a.dl-lg {
    width: 45.2rem;
}
.chat-lt {
    width: 28.7rem;
    height: 16.1rem;
/*    background: url("../images/chat_lt.png") no-repeat center center;*/
    background-size: 100% 100%;
    top: 12.5rem;
    left: 0;
}
.chat-rt {
    width: 28.1rem;
    height: 14.4rem;
/*    background: url("../images/chat_rt.png") no-repeat center center;*/
    background-size: 100% 100%;
    top: 15rem;
    right: 0;
}
.chat-lt>img,.chat-rt>img {width: 100%;height: 100%}
.down {
    position: absolute;
    display: inline-block;
    width: 29.1rem;
    height: 7.9rem;
    background: url("../images/bt_save.png") no-repeat center center;
    background-size: 100% 100%;
    bottom: 21.8rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
}
.qrcode {
    width: 19rem;
    bottom: 3.5rem;
    left: 50%; margin-left: -9.5rem;
    z-index: 3;
    text-align: center;
    display: none;
}
.qrcode>img {
    width: 19rem;
    height: 19rem;
}
.qrcode>p {
    margin: 2rem 0;
    font-size: 2.1rem;
    color: #fff;
}


#myCanvas{ background: none; z-index: 1;}
#sanmImg{ max-width: 100%; }
#runVideo{ display: none; width: 100% !important; height: 100%; margin: 0; padding: 0; position: fixed;object-fit: fill;}

.btn-group{ display: block; text-align: center; margin: 0;}
.btn-group button{ display: inline-block; background:url(../images/btn-bg.png) no-repeat 0 0; background-size: cover; width: 15rem; height: 5rem; margin: 0 10px; font-size: 3rem; color: #863C19;}

.earth-box{ position: absolute; bottom: 0; left: 0; width: 100%; height: 70rem;}
.loading-text img{ width: 28.6rem; height: 10.1rem; }
.btn-start{ display: none; width: 28.9rem; height: 10.2rem; position: absolute; bottom: 17rem; left: 50%; margin-left: -14.45rem; z-index: 200; }

#btn-save{ display: none; position: absolute; bottom: 32rem; left: 50%; margin-left: -16.3rem; width: 32.6rem; height: 8.5rem; background: url(../images/bt_save.png) no-repeat 0 0; background-size: cover; }
.swiper-box{ position: relative; height: 100%;}
.audio-btn{ position: absolute; top: 1rem; right: 1rem; z-index: 200; width: 5rem; height: 5rem; }

@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){
    .bt-earth {
        margin-top: -25rem;
    }
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){
    .bt-earth {
        margin-top: -25rem;
    }
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
    .bt-earth {
        margin-top: -25rem;
    }
}

